import {Marker, Popup, LineLayer, RasterLayer} from '@antv/l7'

export function drawLine(scene, layerName, coordinates, lineWidth = 3, lineColor = 'rgb(22,119,255)', dashArray = false) {
    const data = {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                properties: {},
                geometry: {
                    type: 'LineString',
                    coordinates: coordinates
                }
            }
        ]
    }

    const layer = new LineLayer({name: layerName})
        .source(data)
        .size(lineWidth)
        .shape('line')
        .color(lineColor)
        .style({
            opacity: 0.8
        })

    if (dashArray) {
        layer.style({
            lineType: 'dash',
            opacity: 0.6,
            dashArray: [6, 5]
        })
    }

    scene.addLayer(layer)
    return layer
}

// 自定义marker样式
export function drawMarker(scene, position, markerContent, popupContent, popupTitle = '', popupOpen = true, showPopupCloseButton = true, markerOffsets = [-15, -120], popupOffsets = [0, 50]) {
    const popup = new Popup({
        offsets: popupOffsets,
        closeButton: showPopupCloseButton,
        title: popupTitle
    }).setHTML(popupContent)

    let el = document.createElement('div')
    // el.className = 'marker-wrapper'
    el.innerHTML = markerContent
    const marker = new Marker({element: el, draggable: false, offsets: markerOffsets}).setLnglat(position)
    marker.setPopup(popup)
    scene.addMarker(marker)
    if (popupOpen) {
        marker.openPopup()
    }
    return marker
}

// 自定义popup样式
export function addPopup(scene, position, content) {
    // const start = `<div class="popup"><span class="title">${name}</span><div class="num-wrap inline">`
    const popup = new Popup().setLnglat(position).setHTML(content)
    scene.addMarker(popup)
    return popup
}

export function drawWmsLayer(scene, url, callback) {
// WMS 底图 BBOX获取数据
//   const url =
//     'http://localhost:8080/geoserver/water/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&STYLES&LAYERS=water%3A%E5%AE%9D%E5%AE%89%E5%8C%BA16%E7%BA%A7&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4326&WIDTH=521&HEIGHT=768&BBOX={bbox}'
    const layer = new RasterLayer({
        zIndex: 3,
    }).source(url, {
        parser: {
            type: 'rasterTile',
            tileSize: 256,
            zoomOffset: 0,
        },
    })

    layer.on('click', (e) => {
        if (callback) {
            callback(e)
        }
    })

    if (scene) {
        scene.addLayer(layer);
    }

    return layer
}
